<template>
    <div>
        <div class="header">1、头 <span style="color:white;">{{ username }}</span></div>
        <PageNav />
        <div class="list">
            <div class="box">
                <div class="path">首页 / 全部</div>
                <div class="detail">

                    <!--显示列表-->
                    <div style="margin-top:10px;">

                        <el-row>
                            <el-col :span="12">
                                <img :src="'http://localhost:5286/' + goods.coverImg" class="image">
                            </el-col>
                            <el-col :span="12" class="text">

                                <div>
                                    {{ goods.title }} <div style="color:red;font-size:18px;">{{ goods.salePrice
}}</div>
                                </div>
                                <div>
                                    <span>标题</span>
                                    <div>秒杀</div>
                                </div>
                                <div>
                                    <el-radio-group v-model="radio2" size="medium">
                                        <el-radio-button v-for="(item, index) in colors" :key="index"
                                            :label="item.dictionaryValue"></el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div>
                                    <el-radio-group v-model="radio3" size="medium">
                                        <el-radio-button v-for="(item, index) in sizes" :key="index"
                                            :label="item.dictionaryValue"></el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div>数量</div>
                                <div>
                                    <el-button type="danger" @click="eventJoinCar">加入购物车</el-button>
                                </div>
                            </el-col>
                        </el-row>

                    </div>

                </div>
            </div>
        </div>
        <div class="custom">4、客服</div>
        <div class="footer">5、底部</div>


        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div>登录</div>
            <div>用户名:<el-input v-model="loginForm.username"></el-input></div>
            <div>密码:<el-input v-model="loginForm.password"></el-input></div>
            <div><el-button @click="eventLogin">立即登录</el-button></div>
        </el-dialog>
    </div>
</template>



<script>

//引入组件页面
import PageNav from '@/components/PageNav.vue'

export default {
    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav
    },
    data() {
        return {
            username: '',
            loginForm: {
                username: '',
                password: ''
            },
            dialogVisible: false,
            goods: {},
            radio2: '黑色',
            radio3: '16G',
            colors: [],
            sizes: []
        };
    },
    created() {
        this.onloadData()
        this.username = localStorage.getItem("liangcaigen")

        //localStorage.clear();
    },
    methods: {
        eventLogin() {
            localStorage.setItem("liangcaigen", '8028A924-172A-44D9-9641-348FECA71088')
            this.username = this.loginForm.username
            this.$message('登录成功')
            this.dialogVisible = false
        },
        handleClose(done) {
            console.log(done)
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => { });
        },
        eventJoinCar() {
            let user = localStorage.getItem("liangcaigen")
            if (user == null) {
                //this.$message.error('错了哦,请登录');
                this.dialogVisible = true                
            }
            else {
                let url = 'http://localhost:5286/goods/car/add'
                let data = {
                    "memberId": user,
                    "goodsId": this.goods.id.toString(),
                    "goodsName": this.goods.title,
                    "goodsNumber": 1,
                    "goodsPrice": this.goods.salePrice
                }
                this.$http.post(url, data).then(res => {
                    //console.log(res)
                    this.$message(res.data.message)
                })
            }

        },
        onloadData() {
            let url = 'http://localhost:5286/goods/id?id=' + this.$route.query.id
            this.$http.get(url).then(res => {
                this.goods = res.data.data
            })

            url = 'http://localhost:5286/dictionary'
            this.$http.get(url).then(res => {
                let c = res.data.data
                this.colors = c.filter(x => x.dictionaryType == 'color')
                this.sizes = c.filter(x => x.dictionaryType == 'memory')
            })
        }
    }
}
</script>


<style scoped>
.header,
.footer {
    min-height: 60px;
    background-color: black;
}


.list {
    background-color: #e8e8e8;
    padding-bottom: 60px;
}


.box {
    width: 1100px;
    margin: auto;
}

.category {
    background-color: white;
    border: 1px solid #dcdcdc;
    min-height: 200px;
}

.detail {
    background-color: white;
    margin-top: 20px;
    border: 1px solid #dcdcdc;
    padding: 20px;
}

.custom {}

.text>div {
    text-align: left;
}
</style>